- form = local_assigns.fetch(:form)

.settings-section
  .settings-sticky-header
    .settings-sticky-header-inner
      %h4.gl-my-0
        = _('System header and footer')

  .form-group
    = form.label :header_message, _('Header message'), class: 'col-form-label label-bold'
    = form.text_area :header_message, placeholder: _('State your message to activate'), class: "form-control gl-form-input js-autosize"
  .form-group
    = form.label :footer_message, _('Footer message'), class: 'col-form-label label-bold'
    = form.text_area :footer_message, placeholder: _('State your message to activate'), class: "form-control gl-form-input js-autosize"
  .form-group
    = form.gitlab_ui_checkbox_component :email_header_and_footer_enabled,
      _('Enable header and footer in emails'),
      help_text: _('Add header and footer to emails. Please note that color settings will only be applied within the application interface'),
      label_options: { class: '!gl-font-bold' }

  .form-group.js-toggle-colors-container
    = render Pajamas::ButtonComponent.new(variant: :link, button_options: { class: 'js-toggle-colors-link' }) do
      = _('Customize colors')
  .form-group.js-toggle-colors-container.hide
    = form.label :message_background_color, _('Background Color'), class: 'col-form-label label-bold'
    = form.color_field :message_background_color, class: "form-control gl-form-input"
  .form-group.js-toggle-colors-container.hide
    = form.label :message_font_color, _('Font Color'), class: 'col-form-label label-bold'
    = form.color_field :message_font_color, class: "form-control gl-form-input"
